<template>
  <div class="app-container">
<!--    左侧地图概览    -->
    <el-card style="width: 1100px;height: 900px;background-color: white;float: left" >
      <div  ref="myMap" class="border" style="width: 1100px;height: 900px; margin:auto" ></div>
    </el-card>
<!--   右侧固定展示   -->
    <el-card style="width: 500px;height: 900px;background-color: white; margin-left: 2%; float: left" >
      <el-card class="leaderCard" :body-style="{ padding: '0px' }" v-if="org.addressCode == 220171 || org.addressCode == 220172 || org.addressCode == 220173 || org.addressCode == 220174" v-for="org in organizationList" :key="org.id">
  <!--    标题      -->
        <div slot="header" style="text-align: center" class="clearfix">
          <span style="font-size: large">{{ org.name }}</span>
        </div>
  <!--    头像      -->
        <div style="margin-left: 10px;float: left">
          <el-image
            style="width: 150px; height: 150px; border-radius: 75px;"
            :src=imgUrlHeader+org.leader.avatar
            fit="cover"></el-image>
        </div>
  <!--    内容       -->
        <div v-if="org.leader != undefined" style="padding: 14px;float: left;margin: 2px 0 2px 6px; width:250px; height: 150px;font-family:'微软雅黑';font-size: medium"  >
            <span>- 负责人: {{org.leader.nickName}}<br/></span>
            <span>- 联系方式: {{org.leader.phonenumber}}<br/></span>
            <span><hr/></span>
            <span v-if="org.children.length>0" style="font-size: small">下辖{{org.children.length}}个工作组<br/></span>
            <span v-if="org.children.length>0" style="font-size: small" v-for="team in org.children">&bull;{{team.name}}</span>
        </div>
      </el-card>
    </el-card>

  </div>
</template>

<script>
import cc from '@/assets/json/JL.json'
import {listOrganization} from "@/api/system/organization";
import {listByOid, listleader} from "@/api/system/user";
export default {
  name: "orgview",
  dicts: ['sys_area_code'],
  data() {
    return {
      // 组织列表
      organizationList: [],
      // 用户列表
      userList:[],
      // 图片请求路径头
      imgUrlHeader:process.env.VUE_APP_BASE_API,
      //地图数据
      chartData: [
        { name: '南关区' ,value:1 ,addressCode:220102,info:{}},
        { name: '宽城区' ,value:2 ,addressCode:220103,info:{}},
        { name: '朝阳区' ,value:3 ,addressCode:220104,info:{}},
        { name: '二道区' ,value:4 ,addressCode:220105,info:{}},
        { name: '绿园区' ,value:5 ,addressCode:220106,info:{}},
        { name: '双阳区' ,value:6 ,addressCode:220112,info:{}},
        { name: '九台区' ,value:7 ,addressCode:220113,info:{}},
        { name: '农安县' ,value:8 ,addressCode:220122,info:{}},
        { name: '榆树市' ,value:9 ,addressCode:220182,info:{}},
        { name: '德惠市' ,value:10 ,addressCode:220183,info:{}},
        { name: '公主岭市' ,value:11 ,addressCode:220184,info:{}},
      ],
    }
  },

  created() {
    //页面初始化获得用户列表
    this.getUserList();
  },
  methods: {
    /** 查询组织列表 */
    getList() {
      listOrganization().then(response => {
        this.organizationList = response.data;
        //将组织管理员添加到组织
        this.addLeaderToOrganization(this.userList,this.organizationList);
        //将组织信息添加到地图信息
        this.addChildrenToOrganizationList(this.organizationList);
        //将组织的子节点添加到父节点
        this.addInfoToCharData(this.chartData,this.organizationList);
        //加载地图
        this.initChart();
      });
    },
    /** 查询用户列表 */
    getUserList(){
      listleader().then(response => {
        this.userList = response.data;
        this.getList();
      });
    },

    /** 将组织管理员添加到组织当中 */
    addLeaderToOrganization(userList,organizationList){
      for (const organization of organizationList) {
        for (const user of userList) {
          //如果用户的组织与组织列表相等，并且用户是负责人
          if(user.organizationId == organization.id && user.isGroupleader == 'Y'){
              organization.leader = user;
          }
        }
      }
    },

    /** 将组织信息添加到地图信息当中 */
    addInfoToCharData(chartData,organizationList){
      for (const chart of chartData) {
        for(const organziation of organizationList){
          if(chart.addressCode == organziation.addressCode){
            chart.info = organziation;
            chart.children = organziation.children;
            chart.childrenLength = organziation.children.length;
          }
        }
      }
    },

    /** 将组织的子节点添加到父节点当中 */
    addChildrenToOrganizationList(organizationList){
      for (const organization of organizationList) {
          organization.children = [];
        for (const organizationElement of organizationList) {
            if(organization.id == organizationElement.parentId){
              organization.children.push(organizationElement);
            }
        }
      }
    },

    /** 初始化地图 */
    initChart(){
      //初始化地图
      let myChart = this.$echarts.init(this.$refs['myMap']);
      //图表中注册地图
      this.$echarts.registerMap('cc', cc);
      let option = {
        //开启鼠标缩放和平移漫游
        roam:true,
        backgroundColor: "rgba(204,211,228,0.05)",
        title: {
          text: '长春市疫情流调组织',
          x: 'center'
        },
        // 提示框
        tooltip: {
          // 数据项图形触发
          trigger: 'item',
          // 提示框内容格式化
          formatter: function(params) {
            // 数据图形的颜色
            let color = "#ff6666";
            let content = "<div style='width: 300px'>";
            // 提示框标题
            content += "<div style='background-color:"+color+";padding: 5px 10px;text-align:center;color:white;font-size: 18px;'>" + params.data.info.name + "</div>";
            content += "<div style='padding:3px;'>";
            if( params.data.info.leader != undefined){
               let leader = params.data.info.leader;
              // 提示框头像
              if( leader.avatar != undefined){
                content += `<div style="text-align: center"><img style='width:200px;height:200px;object-fit:cover;border-radius: 50%;' src="${process.env.VUE_APP_BASE_API+leader.avatar}"/></div>`;
              }
              // 负责人信息
              content += `<div style="font-size: 16px">&nbsp;&nbsp;负责人:${leader.nickName}&nbsp;联系方式:${leader.phonenumber}</div>`;
              content += `<hr/>`;
            }
            // 判断是否存在专业小组
            if(params.data.info.children.length>0){
              // 专业组信息
              content += `<div>下辖${params.data.info.children.length}个专业组</div>`;
              for (let team of params.data.info.children){
                content += `<div>&bull;${team.name}`
                if(team.leader != undefined){
                  content += `<div>&nbsp;&nbsp;负责人:${team.leader.nickName}&nbsp;联系方式:${team.leader.phonenumber}</div>`;
                }
                content += `</div>`
              }
            }
            content += "</div>"
            return content;
          },
        },
        series: [
          {
            name: '长春市疫情流调组织图',
            type: 'map',
            mapType: 'cc', // 自定义扩展图表类型，此处需要和registerMap定义的参数一致
            label: {
              show: true
            },
            zoom:1.2, // 视角缩放比例
            // 地图区域的多边形 图形样式
            itemStyle: {
              normal: {
                borderColor: '#0AAEB0', // 图形的描边颜色
                borderWidth: 1, // 描边线宽。
                borderType: 'solid', // 柱条的描边类型。
                areaColor: '#37a2da', // 图形的颜色
                shadowBlur: 5, // 图形阴影的模糊大小。
                shadowColor: '#233F53', // 阴影色
                shadowOffsetX: 5, // X轴阴影
                shadowOffsetY: 5, // Y轴阴影
                label: {
                  show: true, // 显示区域名称
                  textStyle: {
                    color: '#fff',
                    fontSize: 18,
                  },
                }
              },
              // 鼠标移入时 高亮状态下的多边形和标签样式
              emphasis: {
                borderColor: '#2378f7',  // 图形的描边颜色
                borderWidth: '1',        // 图形描边宽度
                areaColor:'#ff6666',     // 图形颜色
                label: {
                  show: true,
                  textStyle: {
                    color: '#1a5cd7',
                    fontSize: 30,
                  }
                }
              },

            },
            data:this.chartData,
          }
        ]
      }
      myChart.setOption(option)//绘制地图
    }

  }
};
</script>

<style scoped>
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .leaderCard{
    height: 200px;
    width:450px;
    margin:10px auto;
  }
</style>
